<template>
    <div class="common-layout">
        <el-container>
            <el-header class="car-header">
                <el-form :inline="true" :model="searchForm" class="search-form">
                    <el-form-item>
                        <el-input v-model="searchForm.carName" placeholder="请输入车名" />
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="searchForm.color" placeholder="选择颜色">
                            <el-option label="全部" value="" />
                            <el-option value="白色">白色</el-option>
                            <el-option value="灰色">灰色</el-option>
                            <el-option value="黑色">黑色</el-option>
                            <el-option value="蓝色">蓝色</el-option>
                            <el-option value="红色">红色</el-option>
                            <el-option value="紫色">紫色</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="searchForm.carType" placeholder="选择类型">
                            <el-option value="轿车">轿车</el-option>
                            <el-option value="跑车">跑车</el-option>
                            <el-option value="皮卡车">皮卡车</el-option>
                            <el-option value="越野车">越野车</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addCarHandle('add')">+ 添加汽车</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table :data="carData" stripe style="width: 100%">
                    <el-table-column prop="carName" label="车名" />
                    <el-table-column prop="img" label="图片">
                        <template #default="{ row }">
                            <el-image style="width: auto; height: 40px; border: none; cursor: pointer;"
                                :src="getImage(row.img)" :preview-src-list="`/download?name=${row.img}`">
                                <template #error>
                                    <img src="@/assets/image/noImg.jpg"
                                        style="width: auto; height: 40px; border: none;">
                                </template>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="carNumber" label="车牌号" />
                    <el-table-column prop="carType" label="类型" />
                    <el-table-column prop="color" label="颜色" />
                    <el-table-column prop="rentPrice" label="租金/天" />
                    <el-table-column prop="deposit" label="押金" />
                    <el-table-column label="状态">
                        <template #default="scope">
                            <el-text style="color: #2fdd2f;">{{ scope.row.state == '0' ? '空闲' : '在租' }}</el-text>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button link style="width: 40px;margin-left: 0px;" type="primary" size="large"
                                @click="handleEditCar(scope.row.id)">编辑</el-button>
                            <el-button link style="width: 40px;margin-left: 0px;" type="primary" size="large"
                                @click="handleDeleteCar(scope.row.id)">出库</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pagination-centered" v-model:current-page="searchForm.currentPage"
                    v-model:page-size="searchForm.pageSize" :page-sizes="[5, 10, 15, 20]" :small="false"
                    :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                    :total="counts" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { getCarPage, deleteCar } from '@/api'
import { ElMessage } from 'element-plus'
// 列表数据
let carData = ref([])

//总页数
let counts = ref(0)

// 定义搜索表单数据模型
let searchForm = reactive({
    carName: '',
    color: '',
    carType: '',
    currentPage: 1,
    pageSize: 5,
    state: 3
});

// 查询处理函数
const handleSearch = () => {
    getCarPage(searchForm).then((res: { data: any }) => {
        let resData = res.data.data
        if (res.data.code == 50041) {
            // 更新列表
            carData = resData.records
            // 更新总页数
            counts.value = resData.total
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error'
            });
        }
    })
};


// 初始化方法
const init = () => {
    // 发送分页查询请求
    getCarPage(searchForm).then((res: { data: any }) => {
        let resData = res.data.data
        if (res.data.code == 50041) {
            // 更新列表
            carData.value = resData.records
            // 更新总页数
            counts.value = resData.total
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error'
            });
        }
    })
}

const baseURL = ref('http://localhost:8081/common')
//获取图片
const getImage = (img: any) => {
    return baseURL.value + `/download?name=${img}`
}

// 编辑汽车信息
const handleEditCar = (id: any) => {
    // 发送消息给父窗口，告知要改变页面
    window.parent.postMessage({ action: 'changePage', url: '/#/car/add?id=' + id }, '*');
}

// 新增汽车信息
const addCarHandle = (id: any) => {
    // 发送消息给父窗口，告知要改变页面
    window.parent.postMessage({ action: 'changePage', url: '/#/car/add' }, '*');
}

// 汽车出库
const handleDeleteCar = (id: number) => {
    console.log(typeof id)
    deleteCar(id).then((res: { data: any }) => {
        if (res.data.code == 50021) {
            ElMessage({
                message: res.data.message,
                type: 'success'
            });
            init();
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error'
            });
        }

    })
}

// 在组件挂载时初始化数据
onMounted(() => {
    init();
});

// 监听页大小改变
const handleSizeChange = (val: number) => {
    searchForm.pageSize = val;
    init();
};

// 监听当前页改变
const handleCurrentChange = (val: number) => {
    searchForm.currentPage = val;
    init();
};

</script>

<style scoped>
.pagination-centered {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    /* 根据需要调整间距 */
}

.el-form-item {
    min-width: 150px;
}

.el-form {
    margin-top: 20px;
}

.car-header {
    overflow: hidden;
}
</style>